using float item got out of parent flow how to fix

/*HTML*/
<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>

/* Css */
.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}